import { Alert, Checkbox, Icon, Button, Form, Input, message } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component } from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import { userLogin } from '@/services/userlogin';
import styles from './style.less';

@connect(({ global, settings }) => ({
  collapsed: global.collapsed,
  settings,
}))
@Form.create()
class Login extends Component {
  loginForm = undefined;
  state = {
    type: 'account',
    autoLogin: true,
  };
  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };

  renderMessage = content => (
    <Alert
      style={{
        marginBottom: 24,
      }}
      message={content}
      type="error"
      showIcon
    />
  );
  handleLogin = e => {
    console.log(e);
    this.props.form.validateFields((err, value) => {
      if (!err) {
        console.log(value);
        this.submitLogin(value);
      }
    });
  };

  submitLogin = async value => {
    const { dispatch } = this.props;

    console.log(value);
    // 调用reducer返回数据
    // dispatch({
    //   type: 'user/Login',
    //   payload: value,
    // });

    // 第一版简单为主
    const res = await userLogin(value);
    console.log('测试数据');
    console.log(res);
    if (res.code == 0) {
      localStorage.setItem('currentName', res.data.name);
      localStorage.setItem('token', res.data.token);
      localStorage.setItem('id', res.data.id);
      message.success('登录成功');
      console.log(localStorage.getItem('currentName'));
      window.location.assign('/');
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    const { status, type: loginType } = userLogin;
    const { type, autoLogin } = this.state;
    return (
      <div className={styles.main}>
        <Form>
          <Form.Item>
            {getFieldDecorator('name', {
              rules: [{ required: true }],
            })(<Input placeholder="用户名" style={{ height: '40px' }}></Input>)}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{ required: true }],
            })(<Input placeholder="密码" style={{ height: '40px' }}></Input>)}
          </Form.Item>
        </Form>

        <div>
          <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
            <FormattedMessage id="user-login.login.remember-me" />
          </Checkbox>
          <a
            style={{
              float: 'right',
            }}
            href=""
          >
            <FormattedMessage id="user-login.login.forgot-password" />
          </a>
        </div>

        <Button
          size="large"
          style={{ width: '100%', marginTop: '20px' }}
          type="primary"
          onClick={this.handleLogin}
        >
          登录
        </Button>

        <Link className={styles.register} to="/user/register">
          <FormattedMessage id="user-login.login.signup" />
        </Link>
      </div>
    );
  }
}

export default Login;
